<template>
	<view class="pageBox">
		<view class="content">
			<view class="list">
				<view class="listItem flex-between" v-for="(item,index) in list" :key="item.id"
					@click="onListItem(item)">
					<view class="listItemText">
						{{ index + 1 }}.{{ item.title }}
					</view>
					<button :plain="true" class="copy" @click.stop="onCopyBtn(item.link)">复制</button>
				</view>
			</view>
			<u-loadmore :status="status" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lastId: 0,
				page: 1,
				list: [],
				end: false,
				status: 'loadmore',
			}
		},
		onLoad() {
			this.getList();
		},
		methods: {
			onListItem(param) {
				if (param.link) {
					uni.navigateTo({
						url: '/pages/home/webview?url=' + encodeURIComponent(param.link)
					})
				} else {
					uni.showToast({
						title: "暂无跳转链接",
						icon: "none",
						duration: 1500,
					})
				}

			},
			onCopyBtn(code) {
				console.log(code);
				if (code) {
					console.log(this);
					// #ifdef H5
					this.$setClipboardData({
						data: code,
						success: function() {
							uni.showToast({
								title: '复制成功',
								icon: "none",
								duration: 1500,
							})
						}
					})
					// #endif
					// #ifndef H5
					uni.setClipboardData({
						data: code,
						success: function() {
							uni.showToast({
								title: '复制成功',
								icon: "none",
								duration: 1500,
							})
						}
					});
					// #endif
				} else {
					uni.showToast({
						title: "暂无复制内容",
						icon: "none",
						duration: 1500,
					})
				}

			},
			getList() {
				if (this.end) {
					return
				}
				this.$post({
					module: 'Content',
					interface: 3000,
					data: {
						lastId: this.lastId,
						page: this.page,
						type: 1
					}
				}).then(res => {
					// console.log(res);
					this.list = [...this.list, ...res.list]
					if (res.list.length < 10) {
						this.end = true
					}
					if (res.list.length < 10) {
						this.status = 'nomore';
					} else {
						this.status = 'loading';
					}
					this.page++
					this.lastId = res.lastId
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.pageBox {
		padding: 32rpx 32rpx 0;
	}

	.content {
		border-radius: 16rpx;

		.list {
			.listItem {
				padding: 24rpx 0;

				.listItemText {
					width: 70%;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #000000;
					word-break: break-all;
				}

				.copy {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					margin: 0;
					padding: 0;
					width: 144rpx;
					height: 48rpx;
					background: #F2615F;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					border: none;
				}
			}

			.listItem:nth-last-of-type(1) {
				border-bottom: 0;
			}
		}
	}
</style>
